<template>
  <div class="container">
    <div class="app-container">
      <div class="left">
        <el-input
          v-model="params.keyword"
          style="margin-bottom: 10px"
          type="text"
          prefix-icon="el-icon-search"
          size="small"
          placeholder="输入员工姓名全员搜索"
          @input="keywordChange"
        />
        <!-- 树形组件 -->
        <!-- node-key：为树形结构的每一个树形节点指定一个唯一标识 -->
        <!-- current-change：每次用户选中某个节点，会触发的事件 -->
        <el-tree
          ref="treeRef"
          :data="list"
          :props="defaultProps"
          default-expand-all
          :highlight-current="true"
          :expand-on-click-node="false"
          node-key="id"
          @current-change="selectNode"
        ></el-tree>
      </div>
      <div class="right">
        <el-row class="opeate-tools" type="flex" justify="end">
          <el-button
            size="mini"
            type="primary"
            @click="$router.push('/employee/detail')"
            v-permission="'add-employee'"
            >添加员工</el-button
          >
          <el-button
            size="mini"
            @click="showDialog = true"
            v-permission="'excel-import'"
            >excel导入</el-button
          >
          <el-button size="mini" @click="exportEmployee">excel导出</el-button>
        </el-row>
        <!-- 表格组件 -->
        <el-table :data="tableList">
          <!-- 只要该列内容渲染不是接口返回的数据，就需要使用插槽渲染自定义内容 -->
          <el-table-column
            label="头像"
            align="center"
            width="80"
            prop="staffPhoto"
          >
            <template #default="{ row }">
              <img
                v-if="row.staffPhoto"
                :src="row.staffPhoto"
                class="staff-photo"
                alt=""
              />
              <span v-else class="username">{{ row.username.charAt(0) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="姓名" prop="username"></el-table-column>
          <el-table-column
            label="手机号"
            sortable
            prop="mobile"
          ></el-table-column>
          <el-table-column
            label="工号"
            sortable
            prop="workNumber"
          ></el-table-column>
          <el-table-column label="聘用形式" prop="formOfEmployment">
            <template #default="{ row }">
              <span>{{ row.formOfEmployment === 1 ? "正式" : "非正式" }}</span>
            </template>
          </el-table-column>
          <el-table-column label="部门" prop="departmentName"></el-table-column>
          <el-table-column
            label="入职时间"
            sortable
            width="100"
            prop="timeOfEntry"
          ></el-table-column>
          <el-table-column label="操作" width="180">
            <template #default="{ row }">
              <el-button
                type="text"
                size="small"
                @click="$router.push(`/employee/detail/${row.id}`)"
                >查看</el-button
              >
              <el-button
                type="text"
                size="small"
                @click="showRoleDialog(row.id)"
                >角色</el-button
              >
              <el-popconfirm
                title="这是一段内容确定删除吗？"
                @onConfirm="deleteEmployee(row.id)"
              >
                <template #reference>
                  <el-button style="margin-left: 10px" type="text" size="small"
                    >删除</el-button
                  >
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-row type="flex" justify="end" align="middle" style="height: 60px">
          <el-pagination
            layout="total,prev,pager,next"
            :total="total"
            :page-size="params.pagesize"
            :current-page="params.page"
            @current-change="handleCurrentChange"
          ></el-pagination>
        </el-row>
      </div>
    </div>
    <!-- 导入员工弹窗组件 -->
    <!-- .sync语法糖语法： -->
    <!-- :自定义属性.sync="自定义属性值" -->
    <!-- 等价于 -->
    <!-- :自定义属性="自定义属性值" @update:自定义属性="自定义属性值 = $event" -->
    <!-- <import-employee
      :showDialog="showDialog"
      @update:showDialog="showDialog = $event"
    ></import-employee> -->
    <!-- 相当于下面的写法 -->
    <import-employee
      :showDialog.sync="showDialog"
      @getEmployeeList="getEmployeeList"
    ></import-employee>
    <!-- 给员工分配角色弹窗 -->
    <!-- el-dialog上的 .sync的作用，点击X和蒙板时会关闭弹窗 -->
    <!-- <el-dialog title="分配角色" :visible.sync="roleVisible"></el-dialog> -->
    <el-dialog title="分配角色" :visible.sync="roleVisible">
      <!-- 所有角色对应的多选框 -->
      <el-checkbox-group v-model="roleIds">
        <el-checkbox v-for="item in roleList" :key="item.id" :label="item.id">{{
          item.name
        }}</el-checkbox>
      </el-checkbox-group>
      <!-- 确定取消按钮 -->
      <div style="margin-top: 40px; text-align: center">
        <el-button type="primary" size="mini" @click="btnOK">确定</el-button>
        <el-button size="mini" @click="roleVisible = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getDepartmentList } from "@/api/department";
import { listToTree } from "@/utils/index";
import {
  getEmployeeList,
  exportEmployee,
  deleteEmployee,
  getEnabledRoleList,
  getEmployeeDetail,
  assignRole,
} from "@/api/employee";
import FileSaver from "file-saver";
import ImportEmployee from "./components/import-employee.vue";
export default {
  name: "Employee",
  components: {
    ImportEmployee,
  },
  data() {
    return {
      // 树形数据
      list: [],
      // 修改el-tree的默认读取字段
      defaultProps: {
        label: "name",
      },
      // 获取表格数据的请求参数
      params: {
        page: 1,
        pagesize: 10,
        keyword: "",
        departmentId: "",
      },
      // 表格数据
      tableList: [],
      // 总条数
      total: 0,
      // 定时器id
      timer: null,
      // 控制导入员工弹窗组件的显示与隐藏
      showDialog: false,
      // 控制给员工分配角色弹窗的显示与隐藏
      roleVisible: false,
      // 选中的角色id组成的数组
      roleIds: [],
      // 所有启用的角色列表数据
      roleList: [],
      // 当前的员工id
      currentId: "",
    };
  },
  created() {
    this.getDepartmentList();
  },
  methods: {
    // 获取组织架构列表数据
    async getDepartmentList() {
      const res = await getDepartmentList();
      this.list = listToTree(res.data, 0);
      this.$nextTick(() => {
        // el-tree渲染完成之后  默认选中首个节点
        // this.$refs.treeRef.setCurrentKey(树形结构节点id) 选中树形结构的某个节点。前提需要为el-tree设置node-key="id"
        this.$refs.treeRef.setCurrentKey(res.data[0].id);
        // 记录选中的首个节点id
        this.params.departmentId = res.data[0].id;
        // 首次加载时，获取员工列表数据
        this.getEmployeeList();
      });
    },
    // 获取员工列表数据
    async getEmployeeList() {
      const result = await getEmployeeList(this.params);
      // console.log(result);
      this.tableList = result.data.rows;
      this.total = result.data.total;
    },
    // 每次用户选中某个节点，会触发的事件
    selectNode(data) {
      // data：选中的节点的数据
      // 记录选中节点的id
      this.params.departmentId = data.id;
      // 页码值赋值为1
      this.params.page = 1;
      // 切换节点时，获取员工列表数据
      this.getEmployeeList();
    },
    // 页码值发生变化会触发的事件
    handleCurrentChange(page) {
      // page：最新的页码值
      // console.log(page);
      // 给请求参数页码值赋值
      this.params.page = page;
      // 发送获取员工列表数据的请求
      this.getEmployeeList();
    },
    // 输入框发生变化会触发的事件
    keywordChange() {
      if (this.timer) clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        // 页码值设置为第一页
        this.params.page = 1;
        // 发送获取员工列表数据的请求
        this.getEmployeeList();
        // 将定时器置空
        this.timer = null;
      }, 500);
    },
    // 导出员工excel
    async exportEmployee() {
      // 调用导出员工excel接口
      const res = await exportEmployee();
      // res：二进制流数据（blob）
      // 下载文件
      FileSaver.saveAs(res, "员工信息表.xlsx");
    },
    // 删除员工
    async deleteEmployee(id) {
      // 调用删除员工接口
      await deleteEmployee(id);
      // 提示用户
      this.$message.success("删除成功");
      // 处理分页
      if (this.tableList.length === 1 && this.params.page > 1) {
        this.params.page--;
      }
      // 重新加载数据
      this.getEmployeeList();
    },
    // 点击角色按钮
    async showRoleDialog(id) {
      // id：员工id
      this.currentId = id;
      // 调用获取所有已启用的角色列表接口
      const res = await getEnabledRoleList();
      this.roleList = res.data;
      // 调用获取员工已有角色的接口
      const result = await getEmployeeDetail(id);
      // console.log(result.data.roleIds);
      this.roleIds = result.data.roleIds;
      // 打开给员工分配角色的弹窗
      this.roleVisible = true;
    },
    // 点击给员工分配角色弹窗的确定按钮
    async btnOK() {
      // 调用给员工分配角色接口
      await assignRole({
        id: this.currentId, // 员工id
        roleIds: this.roleIds, // 给员工分配的角色id组成的数组
      });
      // 提示用户
      this.$message.success("分配角色成功");
      // 关闭弹窗
      this.roleVisible = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.app-container {
  background: #fff;
  display: flex;
  .left {
    width: 280px;
    padding: 20px;
    border-right: 1px solid #eaeef4;
  }
  .right {
    flex: 1;
    padding: 20px;
    .opeate-tools {
      margin: 10px;
    }
    .username {
      height: 30px;
      width: 30px;
      line-height: 30px;
      text-align: center;
      border-radius: 50%;
      color: #fff;
      background: #04c9be;
      font-size: 12px;
      display: inline-block;
    }
    // 头像样式
    .staff-photo {
      width: 30px;
      height: 30px;
    }
  }
}
</style>
